<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="btn">
    <button id="logout" onclick="javascript:window.location.href='./login.html'">退出</button> <span id="user"></span>
    <br/><br/>
    任务：<button onclick="toclaimList()">待领任务</button>
    <button onclick="todoList()">待办任务</button>
    <button onclick="myApply()">由我发起</button>
    <br/><br/>
    流程：
    <button onclick="process()">流程申请</button>
</div>
<br/><hr><br/>
<div id="content">

</div>
</body>
<script>

    var content = $('#content');
    var user = localStorage.getItem("user")
    var group = localStorage.getItem("group")

    $("#user").html("欢迎 " + user + " 登录")


    function toclaimList() {
        content.empty();
        $.get("/demo/tasks/group", { name: group },
            function(data){
                $.each( data, function(i, n){
                    content.append(i + 1)
                    content.append("<div>"+n.processInstanceName+" - "+n.name+ "</div>")
                    content.append("<div>发起人："+n.startUserId+"</div>")
                    content.append("<div>发起时间："+n.startTime+"</div>")
                    content.append("<div><button onclick='claim(\""+n.id+"\")'>认领</button> <button onclick='diagram(\""+n.processInstanceId+"\",\""+n.processDefinitionId+"\")'>流程图</button></div>")
                    content.append("<hr><br/>")
                });
            });
    }

    function claim(taskId) {
        $.get("/demo/claim", { taskId: taskId, user : user },
            function(data){
                console.log(data);
                alert("认领成功,可至“待办任务”查看");
                toclaimList();
            });
    }

    function todoList() {
        content.empty();
        $.get("/demo/tasks/user", { name: user },
            function(data){
                $.each( data, function(i, n){
                    content.append(i + 1)
                    content.append("<div>"+n.processInstanceName+" - "+n.name+ "</div>")
                    content.append("<div>发起人："+n.startUserId+"</div>")
                    content.append("<div>发起时间："+n.startTime+"</div>")
                    content.append("<div><button onclick='complete(\""+n.id+"\")'>完成（提交表单、同意、驳回...等操作）</button> <button onclick='diagram(\""+n.processInstanceId+"\",\""+n.processDefinitionId+"\")'>流程图</button></div>")
                    content.append("<hr><br/>")
                });
            });
    }

    function complete(taskId) {
        $.get("/demo/complete", { taskId: taskId },
            function(data){
                console.log(data);
                alert("处理成功!!!");
                todoList()
            });
    }

    function myApply() {
        content.empty();

        $.get("/demo/myHistoric", { user: user },
            function(data){
            console.log(data)
                $.each( data, function(i, n){

                    content.append("<div>"+n.processDefinitionName+"</div>")
                    content.append("<div>开始："+n.startTime+"</div>")
                    content.append("<div>结束："+(n.endTime==null?"":n.endTime) +"</div>")
                    content.append("<div><button onclick='diagram(\""+n.processInstanceId+"\",\""+n.processDefinitionId+"\")'>流程图</button></div>")
                    content.append("<hr><br/>")

                });
            });
    }

    function process() {
        content.empty();
        content.append("<div style='color:red;font-size: 36px'>月度财务报告</div>")
        content.append("<button onclick='startProcess(\"financialReport\")'>启动流程</button>")
        content.append("<hr><br/>")
        content.append("<div>其他流程......</div>")
    }

    function startProcess(key) {

        $.get("/demo/start", { processKey: key, userId : user },
            function(data){
                console.log(data);
                alert("启动成功,可至“由我发起”查看");
            });
    }

    function diagram(processInstanceId, processDefinitionId) {

        localStorage.setItem("imgProcessInstanceId", processInstanceId);
        localStorage.setItem("imgProcessDefinitionId", processDefinitionId);
        window.open("./diagram.html", "_blank")
    }

</script>
</html>
